<template>
	<view>
		<view class="item mb-16" @click="$u.route('/pages/order/marketDetail',{id:item.id})">
			<w-image :src="item.goods_cover_image" width="80" height="80" radius="8"></w-image>
			<view class="right">
				<view class="flex-center-sb flex-ai-start">
					<view>
						<view class="font-size-14 font-color-textPrimary font-w-500 text-overflow">{{ item.goods_name&&handleLang(item.goods_name) }}</view>
						<view class="flex-center-sb mt-4">
							<view class="tag" v-if="item.status==1">{{handleLang('寄售中')}}</view>
							<view class="tag" v-if="item.status==2">{{handleLang('已售出')}}</view>
							<view class="num" v-if="goods_type==2">#<text>{{ item.user_collection.collection_code }}</text>/{{ item.user_collection.total_num }}</view>
						</view>
					</view>
					<text class="price">{{ Number(item.price) }}</text>
				</view>
				<view class="flex-center-sb">
					<text class="font-size-10 font-color-999">{{handleLang('共 1 件寄售')}}</text>
					<view class="clear_btn" v-if="item.status==1" @click.stop="cancel_consignment_id=item.id;cancel_consignment_pop=true">{{handleLang('取消寄售')}}</view>
				</view>
			</view>
		</view>
		<w-toast v-model="cancel_consignment_pop" contentAlign="center" :content="handleLang('确认取消此寄售？')" @action='cancelConsignment'></w-toast>
	</view>
</template>

<script>
	import { changeMarketGoods } from '@/api/market/index.js';
	export default {
		props:{
			item:{
				type:Object,
				default:{}
			},
			goods_type:{
				type:Number|String,
				default:''
			}
		},
		data() {
			return {
				cancel_consignment_id:'',
				cancel_consignment_pop:false
			};
		},
		methods:{
			// 取消寄售
			cancelConsignment(e) {
				if(!e) return
				uni.showLoading()
				changeMarketGoods({ id:this.cancel_consignment_id }).then(()=>{
					this.$emit('refresh')
				}).catch(()=>{})
			}
		}
	} 
</script>

<style lang="scss" scoped>
	.item{
		width: 100%;
		height: 210rpx;
		border-radius: 24rpx;
		padding: 24rpx;
		@extend .flex-center-sb,.bg-color-item;
		>.right{
			width: calc(100% - 180rpx);
			height: 100%;
			@extend .flex,.flex-dir-col,.flex-js-sb;
		}
		.tag{
			border-radius: 4rpx;
			padding: 4rpx 12rpx;
			@extend .font-size-10,.font-color-white,.bg-color-theme,.mr-8;
		}
		.num{
			@extend .font-color-999,.font-size-10;
			>text{ @extend .font-size-14,.font-color-999,.mlr-2; }      
		}
		.clear_btn{ 
			width: 144rpx;
			height: 50rpx;
			text-align: center;
			line-height: 46rpx;
			border-radius: 50rpx;
			border: 2rpx solid #222;
			color: #222;
			font-size: 24rpx;
		}
		.price{
			font-size: 40rpx;
			color: #fdfdfd;
			&::before{
				content: '￥';
				font-size: 24rpx;
			}
		}
	}
</style>
